<template>
  <div class="container mx-auto p-4">
    <h1 class="text-2xl font-bold mb-6">购物车</h1>
    
    <!-- 空购物车提示 -->
    <div v-if="!cartStore.items.length" class="text-center py-8">
      <p class="text-gray-500">购物车是空的</p>
      <router-link to="/products" 
                   class="text-blue-500 hover:text-blue-700 mt-4 inline-block">
        去购物
      </router-link>
    </div>
    
    <!-- 购物车商品列表 -->
    <div v-else class="space-y-4">
      <div v-for="item in cartStore.items" 
           :key="item.id"
           class="flex items-center justify-between border-b py-4">
        <!-- 商品信息 -->
        <div class="flex items-center space-x-4">
          <img :src="item.image" 
               :alt="item.title"
               class="w-20 h-20 object-contain">
          <div>
            <h3 class="font-semibold">{{ item.title }}</h3>
            <p class="text-gray-600">¥{{ item.price }}</p>
          </div>
        </div>
        
        <!-- 数量控制 -->
        <div class="flex items-center space-x-4">
          <button @click="cartStore.updateQuantity(item.id, item.quantity - 1)"
                  :disabled="item.quantity <= 1"
                  class="px-3 py-1 border rounded">-</button>
          <span>{{ item.quantity }}</span>
          <button @click="cartStore.updateQuantity(item.id, item.quantity + 1)"
                  class="px-3 py-1 border rounded">+</button>
          <button @click="cartStore.removeFromCart(item.id)"
                  class="text-red-500 hover:text-red-700">
            删除
          </button>
        </div>
      </div>
      
      <!-- 总计 -->
      <div class="flex justify-end space-x-4 pt-4">
        <div class="text-xl">
          总计: <span class="font-bold">¥{{ cartStore.totalAmount.toFixed(2) }}</span>
        </div>
        <button class="bg-blue-500 text-white px-6 py-2 rounded hover:bg-blue-600">
          结算
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useCartStore } from '../store/cartStore'

const cartStore = useCartStore()
</script> 